<template>
	<s-layout title="我的酒库" :onShareAppMessage="shareInfo" backgroundColor="#FFAA08" opacityBgUi="bg-wines">
		<view class="top">

		</view>
		<view class="main">
			<view class="main-top">
				<view class="item" @click="sheep.$router.go('/pages/second/claimRecord')">
					<view>{{wineInfo.orderNumber}}</view>
					<view>领取订单</view>
				</view>
				<view class="item" @click="sheep.$router.go('/pages/second/giftRecords')">
					<view>{{wineInfo.shareNumber}}</view>
					<view>成功赠与</view>
				</view>
			</view>
			<text class="my-wine">
				我的酒库
			</text>
			<s-empty v-if="state.total === 0" icon="/static/order-empty.png" text="暂无数据"></s-empty>
			<view class="list">
				<view class="item" v-for="item,index in wineList" :key="index">
					<view class="item-left">
						<image class="avatar" :src="sheep.$url.cdn(item.goods.image)" mode=""></image>
						<view class="wine">
							<view class="wine-name">{{item.goods.title}}</view>
							<view class="wine-num">{{item.current_num||0}}瓶</view>
						</view>
					</view>
					<view class="item-right">
						<view class="receive" @click="getWines(item)">
							立即领取
						</view>
						<view class="gift" @click="give(item)">赠与好友</view>
					</view>
				</view>
			</view>
			<uni-load-more v-if="state.total!=0" :status="state.loadStatus" :content-text="{
			    contentdown: '点击查看更多',
			  }" @tap="loadmore" />
		</view>
		<su-popup :show="giveInfo.show" type="center" @close="()=>rest()">
			<view class="uni-popup-dialog">
				<view class="uni-dialog-title" style="padding:30rpx 30rpx 0">
					<text class="uni-dialog-title-text uni-popup__info">
						{{ giveInfo.title }}
					</text>
				</view>

				<view class="uni-dialog-content">
					<input class="uni-dialog-input" v-model="giveInfo.num" type="number" placeholder="请输入赠与的数量"
						:focus="true" />
				</view>
				<view class="uni-dialog-button-group">
					<view class="uni-dialog-button" @click="rest">
						<text class="uni-dialog-button-text">取消</text>
					</view>
					<button open-type="share" class="uni-dialog-button uni-border-left share" @click="onOk"
						v-if="share">
						<text class="uni-dialog-button-text uni-button-color">确认</text>
					</button>
					<view class="uni-dialog-button uni-border-left" @click="confirm" v-else>
						<text class="uni-dialog-button-text uni-button-color">确认</text>
					</view>
				</view>
			</view>
		</su-popup>
		<!-- <su-dialog share @confirm="confirm" @close="giveInfo.show=false" :show="giveInfo.show" mode="input"
			:title="giveInfo.title" placeholder="请输入赠与数量" inputType="number"></su-dialog> -->
	</s-layout>
</template>
<script setup>
	import wine from '@/sheep/api/second';
	import {
		computed,
		reactive,
		ref,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import _ from 'lodash';
	const sysStore = sheep.$store('sys');
	const sys = computed(() => sysStore);
	const wineList = ref([])
	const wineInfo = reactive({
		orderNumber: 0, //领取订单数
		shareNumber: 0, //成功赠与数
	})
	const state = reactive({
		total: 1,
		current_page: 1,
		last_page: 1,
		loadStatus: '',
		params: {
			page: 1,
			list_rows: 10
		}
	});

	const createInfo = () => {
		return {
			show: false,
			title: '',
			wines_id: '',
			img: '',
			num: '',
			haveNum: ''
		}
	}

	const giveInfo = ref(createInfo())

	const give = (item) => {
		giveInfo.value.show = true
		giveInfo.value.title = item.goods.title
		giveInfo.value.wines_id = item.id
		giveInfo.value.img = sheep.$url.cdn(item.goods.image)
		giveInfo.value.haveNum = item.current_num
	}
	const confirm = () => {
		if (!giveInfo.value.num) return uni.showToast({
			title: '请输入分享数量',
			icon: 'none'
		})
		if (giveInfo.value.num > giveInfo.value.haveNum) return uni.showToast({
			title: '你输入的数量应小于自己拥有的',
			icon: 'none'
		})

	}

	const getWines = (item) => {
		sheep.$store('cart').goodItem=item
		sheep.$router.go('/pages/second/goodsDetails', {
			id: item.goods_id,
			goods_sku_price_id: item.goods_sku_price_id
		})
	}

	const rest = () => {
		giveInfo.value = createInfo()
		share.value = false
	}

	const share = ref(false)
	watch(() => giveInfo.value.num, (res) => {
		if (res && (giveInfo.value.num > giveInfo.value.haveNum)) {
			share.value = false
		} else {
			share.value = true
		}
	})
	const shareInfo = computed(() => {
		return {
			title: giveInfo.value.title, // 商品标题
			image: giveInfo.value.img, // 商品主图
			path: `/pages/second/share?wines_id=${giveInfo.value.wines_id}&share_num=${giveInfo.value.num}&date=${sheep.$helper.timeFormat(new Date(),'yyyy-mm-dd hh:MM:ss')}`,
		}
	});


	// onShareAppMessage((res) => {
	// 	console.log(res, giveInfo.value);
	// 	// rest()
	// 	return {
	// 		title: giveInfo.value.title,
	// 		path: `/pages/second/share?wines_id=${giveInfo.value.wines_id}&share_num=${giveInfo.value.num}`,
	// 		imageUrl: giveInfo.value.img,
	// 	}

	// })




	const getList = (page = 1) => {
		state.loadStatus = 'loading';
		wine.winesList({
			...state.params,
			page
		}).then(res => {
			console.log(res);
			const {
				data: {
					data,
					total,
					current_page,
					last_page,
				}

			} = res

			wineList.value = _.concat(wineList.value, data);
			state.total = total
			state.current_page = current_page
			state.last_page = last_page
			if (state.current_page < state.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
			console.log(res, state)
		})
	}
	const getInfo = () => {
		wine.wineIndex().then(res => {
			const {
				data: {
					user,
				}
			} = res
			Object.assign(wineInfo, user)
		})
	}
	// 加载更多
	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			getList(state.current_page + 1);
		}
	}
	onShow(() => {
		rest()
		getInfo()
	})

	onLoad((options) => {
		getList()
	});
	// 上拉加载更多
	onReachBottom(() => {
		loadmore()
	});
</script>
<script>
	// export default {
	// 	onShareAppMessage() {
	// 		return {
	// 			title: "雅歌洗化，不辜负每一份热爱",
	// 			path: '/pages/template/index',
	// 		}
	// 	}
	// }
</script>
<style lang="scss" scoped>
	.top {
		width: 100%;
		height: 128rpx;
		background-color: #FFAA08;
	}

	.main {
		margin-top: -74rpx;
		padding: 0 36rpx;
		// background: #F4F4F4;

		.main-top {
			padding: 14rpx 84rpx 18rpx;
			background: #2F2F2F;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 50rpx;

			.item {
				text-align: center;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 52rpx;
			}
		}

		.my-wine {
			font-weight: 700;
			font-size: 48rpx;
			color: #000000;
			margin-left: 20rpx;
			position: relative;
			width: 100%;
			padding-top: 50rpx;

			&::before {
				content: '';
				position: absolute;
				bottom: -4px;
				left: 50%;
				transform: translateX(-50%);
				width: 138rpx;
				height: 6rpx;
				background: #FFAA08;
				border-radius: 60rpx 60rpx 60rpx 60rpx;
			}
		}

		.list {
			margin-top: 74rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 62rpx;

			}

			.item-left,
			.item-right {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.item-right {

				.receive,
				.gift {
					font-size: 24rpx;
					color: #FFFFFF;
					width: 118rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}

				.receive {
					background: #000000;
				}

				.gift {
					margin-left: 28rpx;
					background: #FFAA08;
				}
			}

			.avatar {
				width: 120rpx;
				height: 120rpx;
				background: #D8D8D8;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
			}

			.wine {
				flex: 1;
				padding-left: 40rpx;
				text-align: left;

				.wine-name {
					font-weight: 400;
					font-size: 32rpx;
					color: #000000;
				}

				.wine-num {
					padding-top: 14rpx;
					font-size: 28rpx;
					color: #6D6D6D;
				}
			}
		}

	}

	.uni-popup-dialog {
		width: 300px;
		border-radius: 11px;
		background-color: #fff;
	}

	.uni-dialog-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 25px;
	}

	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}

	.uni-dialog-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 20px;
	}

	.uni-dialog-content-text {
		font-size: 14px;
		color: #6c6c6c;
	}

	.uni-dialog-button-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.uni-dialog-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */

		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}

	.uni-border-left {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 1px;
	}

	.uni-dialog-button-text {
		font-size: 16px;
		color: #333;
	}

	.uni-button-color {
		color: #007aff;
	}

	.uni-dialog-input {
		flex: 1;
		font-size: 14px;
		border: 1px #eee solid;
		height: 40px;
		padding: 0 10px;
		border-radius: 5px;
		color: #555;
	}

	.uni-popup__success {
		color: #4cd964;
	}

	.uni-popup__warn {
		color: #f0ad4e;
	}

	.uni-popup__error {
		color: #dd524d;
	}

	.uni-popup__info {
		color: #909399;
	}

	.share {
		background-color: #fff;
		border-radius: 0;
		padding: 0;

		&::after {
			border: none;
		}
	}
</style>